<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .div {
        display: flex;
        height: 100px;
        width: 100px;
        border: 1px solid #ddd;
    }
    .div2 {
        float: right;   /* 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 */
        width: 50px;
        border: 1px solid green;
    }
    .span { /* 对行内元素使用 inline-flex 类似与对它使用 inline-block 是不能换行的，如果使用flex，类似于对它使用了 block 要进行换行*/
        display: inline-flex;
        height: 100px;
        width: 100px;
        border: 1px solid #ddd;
    }
</style>
<body>
    <div class="div">
        div1
        <div class="div2">
            div2
        </div>
    </div>
    <span class="span">
       span1
    </span>
    <span class="span">
       span2
    </span>
    <div class="div">
       div3
    </div>
</body>
</html>